<template>
  <div style="margin: 0 20px;">
    <div style="display: flex; justify-content: space-between; height: 40px; line-height: 40px;">
      <span style="font-weight: 600;  font-size: 16px; color: #333333;">送货清单</span>
      <span
        class="operation-operation"
        @click="this.$router.push('/shoppingCart')"
      >  返回修改购物车</span>
    </div>

    <div
      v-for="(item, index) in shoppingCartInfos"
      :key="index"
      style="display: flex; flex-direction: row; margin-bottom: 10px;"
    >
      <div
        class="block"
        style="background-color: #f7f7f7; width: 300px;"
      >
        <span class="title">配送方式</span>
        <div style="display: flex; flex-direction: row;">
          <div
            :class="{'text-active': item.logistics === 0}"
            @click="item.logistics = 0"
            class="text"
          >快递运输</div>
          <div
            :class="{'text-active': item.logistics === 1}"
            @click="item.logistics = 1"
            class="text"
          >上门自提</div>
        </div>
      </div>
      <div
        class="block"
        style="background-color: #f3fbfe; flex-grow: 1;"
      >
        <span class="title">商家 {{ item.storeName }}</span>
        <div style="margin-top: 10px; display: flex; flex-direction: row;">
          <el-image :src="item.image" style="width: 80px; height: 80px;"></el-image>
          <span style="width: 250px; margin: 0 10px;">{{ item.commodityName > 40 ? item.commodityName.slice(0, 40) : item.commodityName }}</span>
          <span style="color: #e4393c; font-weight: 600; width: 100px; text-align: right;">￥{{ item.price }}</span>
          <span style="width: 100px; text-align: right;">x{{ item.number }}</span>
          <span style="width: 60px; text-align: right;">有货</span>
        </div>
      </div>
    </div>

    <!-- <el-divider style="margin: 10px 0;"></el-divider> -->
  </div>
</template>

<script>
export default {
  props: {
    shoppingCartInfos: Array,
  },
  data() {
    return {
    };
  },
  methods: {
  },
  created() {
  },
};
</script>

<style scoped>
.text {
  width: 120px;
  height: 20px;
  display: flex;
  justify-content: center;
  line-height: 20px;
  padding: 4px 4px;
  margin-top: 10px;
  margin-right: 10px;
  border: 2px solid #e8e8e8;
  cursor: pointer;
}

.text-active {
  border: 1px solid #3271ae;
  background: linear-gradient(-45deg, #3271ae 12px, #f7f7f7 0);
}

.block {
  padding: 10px 20px;
}
.title {
  color: #666666;
  font-weight: 600;
}

.operation-operation:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>